<template>
	<g-layout :back="false" title="index">
		<view class="header-swipc">
			<u-swiper
					:list="list3"
					previousMargin="30"
					nextMargin="30"
					circular
					:autoplay="false"
					radius="5"
					bgColor="#ffffff"
			></u-swiper>
		</view>

		<view class="pd-10">
			<u-notice-bar mode="horizontal" :text="text1" color="#007aff" />
		</view>

		<view class="menu-main">
			<view class="menu-item" v-for="(item,index) in menuData" :key="index" @click="onMenu(item)">
				<view class="item-name">{{item.name}}</view>
				<image class="images"  :src="item.img" mode="aspectFill" />
			</view>
		</view>
	</g-layout>
</template>

<script>
import indexData from "./index.json"

	export default {
		data() {
			return {
				versions:"",
				title: '吴氏延陵乐业山甲支系家族',
				swiperImgs:[],
				menuData:[],
				text1: 'uView UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用',
				list3: [
				'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				'https://cdn.uviewui.com/uview/swiper/swiper2.png',
				'https://cdn.uviewui.com/uview/swiper/swiper3.png',
			]
			}
		},
		mounted() {
			const self = this;
			self.versions = indexData.versions
			self.swiperImgs = indexData.swiperData
			self.list = indexData.swiperTitle
			self.menuData = indexData.menuData
		},
		onBackPress(options) {
			if (options.from === 'navigateBack') {
				return false;
			}
			return true;
		},
		methods: {
			getNetworkType(){
				uni.getNetworkType({
					success: function (res) {
						console.log("网络类型",res.networkType);//网络类型 wifi、2g、3g、4g、ethernet、unknown、none
						if(res.networkType === "none"){
							uni.showToast({
								title: "当前无网络!",
								icon: "none",
								position: 'bottom'
							})
						}else {
							uni.showToast({
								title: "当前网络正常!",
								icon: "none",
								position: 'bottom'
							})
						}
					}
				})
			},
			onMenu(item){
				const self = this;
				self.openPage({
					url: '/pages_pedigree/detail',
					params: item
				});
			},
			onViewSwiper(index){
				const self = this;
				uni.previewImage({
					current: index,
					urls: self.swiperImgs
				});
			},
			compareVersions(version1, version2) {
				// 将版本号字符串转换为数组
				const arr1 = version1.split('.');
				const arr2 = version2.split('.');

				// 获取两个数组的最大长度
				const maxLength = Math.max(arr1.length, arr2.length);

				// 遍历数组，比较每个位置的数字
				for (let i = 0; i < maxLength; i++) {
					// 如果arr1的当前位置没有值，则视为0
					const num1 = parseInt(arr1[i] || 0, 10);
					// 如果arr2的当前位置没有值，则视为0
					const num2 = parseInt(arr2[i] || 0, 10);

					// 比较数字
					if (num1 < num2) {
						return -1; // version1 < version2
					} else if (num1 > num2) {
						return 1; // version1 > version2
					}
				}
				// 如果所有位置上的数字都相等，则版本号相同
				return 0; // version1 === version2
			},
			installFileByUrl(){
				const self = this;
				plus.nativeUI.showWaiting("下载更新包文件...");
				let header = {};
				uni.downloadFile({
					url: "http://s8bs1fma3.hn-bkt.clouddn.com/Genealogy1.0.0.APK",
					header: header,
					success: (res) => {
						if (res.statusCode === 200) {
							plus.nativeUI.closeWaiting();
							var path = plus.io.convertLocalFileSystemURL(res.tempFilePath);
							plus.nativeUI.showWaiting("准备安装更新包……");
							plus.runtime.install(path, {}, function() {
								plus.nativeUI.closeWaiting();
								plus.nativeUI.alert("更新包安装完成！", function() {
									plus.runtime.restart();
								});
							}, function(e) {
								plus.nativeUI.closeWaiting();
								plus.nativeUI.alert("更新包安装失败[" + e.code + "]：" + e.message);
							});
						}
					},
					fail: (err) => {
						console.log(err);
						uni.showToast({
							icon: 'none',
							mask: true,
							title: '下载失败',
						});
					},
				});
			},
			versionsUpdate(version1, version2){
				const self = this;
				if(self.compareVersions(version1, version2) === 1){
					console.log("更新");
					uni.showModal({
						title: "检测到新版本，是否更新？",
						success: (res) => {
							if (res.confirm) {
								console.log("更新ff");
								self.installFileByUrl()
							}
						}
					})
				}
			},
		}
	}
</script>

<style lang="scss">
.header-swipc{margin-top: 20rpx;}

/deep/.home-index_vue{background: #F8F8F8;}
/deep/.u-navbar-content-title{left: inherit!important;width: -webkit-fill-available!important;right: inherit!important;}


.home-index_vue {

}

.search {
	margin: 24rpx 30rpx 20rpx 30rpx !important;

	/deep/.u-content{
		background: #fff !important;
		padding: 25rpx;
		border: 2rpx solid #DDDDDD;
		height: 70rpx !important;
	}

	/deep/.u-input{
		background: #fff !important;
	}

}
.menu-main{
	display: grid;
	grid-template-columns: repeat(2,1fr);
	grid-gap:15px;
	padding: 0 10px 30px;
	.menu-item{
		position: relative;
		border: 1px solid #c4bfbf;
		border-radius: 10px;
		height: 115px;
		overflow: hidden;
		display: block;
		object-fit: cover;
		background-clip: padding-box;
		box-sizing: border-box;
		box-shadow: 0 2px 12px 0 #939393;
		uni-image{height: 100%;}
		.item-name{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%); /*移动元素到正确的位置*/
			z-index: 10;
			text-align: center;
			background: white;
			padding: 5px 20px;
			border-radius: 10px;
			opacity: 0.8;
			overflow: hidden;
		}
	}
	:nth-child(4) .item-name{min-width: 190rpx;}
}
</style>

